<!-- 新增公告 -->
<template>
  <div class="add-announcement">
    <el-dialog
      width="800px"
      class=""
      title="新增公告"
      :visible="$store.state.dialog.addAnnouncement"
      @close="close">
      <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" size="mini">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <quill-editor
            v-model="formData.content"
            ref="myQuillEditor"
            :options="editorOption">
          </quill-editor>
          <!-- <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入公告内容"
            v-model="formData.content">
          </el-input> -->
        </el-form-item>
        <el-form-item label="公告有效时间" prop="validTime">
          <el-date-picker
            v-model="formData.validTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择有效时间">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="formData.state">
            <el-option label="显示" value="0"></el-option>
            <el-option label="不显示" value="1"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="loadShow" @click="sureAddNotice('formData')" size="mini">确 定</el-button>
        <el-button type="primary" size="mini" v-else :loading="true">加载中</el-button>
        <el-button @click="close()" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addNotice
} from '../api/message'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      formData: {
        title: '',
        content: '',
        validTime: ''
      },
      editorOption: {},
      loadShow: true,
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        validTime: [
          { required: true, message: '请选择公告有效时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加公告
    async AddNotice () {
      this.loadShow = false
      let that = this
      // console.log(this.formData.content)
      const res = await addNotice(this.formData)
      if (res.status === 200) {
        this.$parent.getTableData(1, 15) // 调用父组件
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        setTimeout(function () {
          that.loadShow = true
        }, 500)
        this.$store.commit('hide_add_announcement')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loadShow = true
      }
    },
    // 确认添加
    sureAddNotice (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.AddNotice()
        } else {
          return false
        }
      })
    },
    // 关闭
    close () {
      this.$store.commit('hide_add_announcement')
    }
  }
}
</script>

<style lang="less">
</style>
